<template>
  <div class="app-container">
    <el-form
      ref="editSalesPlan"
      :rules="rules"
      :model="editSalesPlan"
      label-position="right"
      label-width="80px"
      size="small"
    >
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
      <h3 style=" color: #3370FF;">票务基本信息:</h3>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="票务编码 :"style="margin-bottom: 0px;">
            {{tictCode}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="票务名称 :" prop="tictName" style="margin-bottom: 0px;">
            {{editSalesPlan.tictName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="票务种类 :"style="margin-bottom: 0px;">
              {{tictKind}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="场馆 :"style="margin-bottom: 0px;">
                {{yardName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="商户信息 :"style="margin-bottom: 0px;">

          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="详情图 :"style="margin-bottom: 0px;">
            <el-upload ref="detailUpload" action="''"
                       disabled
                       list-type="picture-card"
                       :file-list="detailShowImgs"
                       :auto-upload="false"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="票务描述 :"style="margin-bottom: 0px;">
          {{tictInfo}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="验证方式 :"style="margin-bottom: 0px;">
            {{validation}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="退票 :" style="margin-bottom: 0px;">
              {{recedeTick}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <h3 style=" color: #3370FF;">票务售卖信息:</h3>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4" >
          <el-form-item label="播出日期 :" style="margin-bottom: 0px;">
          <div>
            {{editSalesPlan.startShowTime}}-{{editSalesPlan.endShowTime}}
          </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
              <el-form-item label="播出场次 :" style="margin-bottom: 0px;">
                <el-row :span="24" v-for="(item,index) in editSalesPlan.items"  :key="index" @deleteIndex="del">
                 {{item.name}} {{item.startTime}} {{item.endTime}}
                </el-row>
              </el-form-item>
        </el-col>
          </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="团队购票 :" prop="teamCumstoer" style="margin-bottom: 0px;">
            {{editSalesPlan.teamCumstoer}} {{editSalesPlan.teamDefine}}人
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
            <el-row v-for="(stallItems,index) in editSalesPlan.stallItems"  :key="'str'+index" @deleteIndex="delStallItems">
              <el-form-item label="票档 :" style="margin-bottom: 0px;">
                {{stallItems.name}} ￥{{stallItems.stallPrice}}
                </el-form-item>
            </el-row>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="16" :offset="4">
          <el-form-item label="售卖结束 :" style="margin-bottom: 0px;">
            {{editSalesPlan.sellEnd}}{{editSalesPlan.sellTime}}{{editSalesPlan.sellDateUnit}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-footer height="80px">
        <el-row style="display: flex;justify-content: center;align-items: center;">
          <el-button @click="approve" type="primary" v-if="showApprove">
            同意
          </el-button>
          <el-button @click="refused" type="primary" v-if="showRefused">
            拒绝
          </el-button>
          <el-button @click="editOut">取消</el-button>
        </el-row>
      </el-footer>
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="票务信息 :" prop="tictName">-->
      <!--                <el-select-->
      <!--                  v-model="editSalesPlan.tictName"-->
      <!--                  filterable-->
      <!--                  placeholder="请选择票务信息"-->
      <!--                  style="width: 100%;"-->
      <!--                  @change="getTictValue"-->
      <!--                >-->
      <!--                  <el-option-->
      <!--                    v-for="item in tictData"-->
      <!--                    :key="item.code"-->
      <!--                    :label="item.name"-->
      <!--                    :value="item.name"-->
      <!--                  >-->
      <!--                    {{ item.name }}-->
      <!--                  </el-option>-->
      <!--                </el-select>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="票面名称 :" prop="salName">-->
      <!--                <el-input v-model="editSalesPlan.salName" placeholder="请输入票面名称" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="售票计划代码 :" prop="code">-->
      <!--                <el-input v-model="editSalesPlan.code" placeholder="请输入售票计划代码" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="售票信息 :" prop="info">-->
      <!--                <el-input v-model="editSalesPlan.info" placeholder="请输入售票信息" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="票面计费类型 :" prop="salTp">-->
      <!--                <el-select v-model="editSalesPlan.salTp" filterable placeholder="请选择票面计费类型" style="width: 100%;">-->
      <!--                  <el-option-->
      <!--                    v-for="item in tckSaltpOptions"-->
      <!--                    :key="item.code"-->
      <!--                    :label="item.name"-->
      <!--                    :value="item.name"-->
      <!--                  >-->
      <!--                    {{ item.name }}-->
      <!--                  </el-option>-->
      <!--                </el-select>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="预订天数(天) :" prop="reseDays">-->
      <!--                <el-input v-model="editSalesPlan.reseDays" placeholder="请输入预订天数" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="发售时间 : " prop="startTime">-->
      <!--                <el-date-picker-->
      <!--                  v-model="editSalesPlan.startTime"-->
      <!--                  type="date"-->
      <!--                  placeholder="请选择发售时间"-->
      <!--                  value-format=" yyyy-MM-dd"-->
      <!--                  style="width:100%"-->
      <!--                />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="结束时间 :" prop="endTime">-->
      <!--                <el-date-picker-->
      <!--                  v-model="editSalesPlan.endTime"-->
      <!--                  type="date"-->
      <!--                  placeholder="请选择结束时间"-->
      <!--                  value-format=" yyyy-MM-dd"-->
      <!--                  style="width:100%"-->
      <!--                />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="播出场次" prop="boradsTimes">-->
      <!--                <el-time-picker-->
      <!--                  v-model="editSalesPlan.boradsTimes"-->
      <!--                  is-range-->
      <!--                  range-separator="至"-->
      <!--                  start-placeholder="开始时间"-->
      <!--                  end-placeholder="结束时间"-->
      <!--                  placeholder="选择时间范围"-->
      <!--                />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="团队购票折扣 ： " prop="teamCumstoer">-->
      <!--                <el-input v-model="editSalesPlan.teamCumstoer" placeholder="请输入折扣">折</el-input>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="团队限定人数 ： " prop="definePeoples">-->
      <!--                <el-input v-model="editSalesPlan.definePeoples" placeholder="请输入限定人数" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="日发售数量(张) :" prop="dayNum">-->
      <!--                <el-input v-model="editSalesPlan.dayNum" placeholder="请输入日发售数量" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="20">-->
      <!--              <el-form-item label="售票价格(元) :" prop="price">-->
      <!--                <el-input v-model="editSalesPlan.price" placeholder="请输入售票价格" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
    </el-form>
  </div>
</template>

<script>
  import { replaceSpacesObj } from '../../../utils/webUtils.js'

  export default {
    name: 'EditTict',
    components: {  },
    props: {
      salesPlanUuid: {
        type: String
      }
    },
    data() {
      return {
        uuid: this.salesPlanUuid,
        editSalesPlan: {
          code: '',
          tictName: '',
          tictCode: '',
          info: '',
          salTp: '',
          salName: '',
          merchUuid: '',
          merchName: '',
          yardName: '',
          yardCode: '',
          reseDays: '',
          startTime: '',
          endTime: '',
          dayNum: '',
          price: '',
          imgStr: '',
          boradsTimes: '',
          teamCumstoer: '',
          definePeoples: '',
          sellTime:'',
          startShowTime:'',
          endShowTime:'',
          sellEnd:'',
          sellStart:'',
          teamDefine:'',
          items: [{'name':'','showTime':''}],
          stallItems: [{'name':'','takeColor':'#ff0000','color':'#ff0000','stallPrice':''}],
          sellDateUnit:'',
        },
        yardName:'',
        tictKind:'',
        tictCode:'',
        tictInfo:'',
        validation:[],
        recedeTick:'',
        detailImgStr:'',
        allShowTime:[],
        sellEndOption:[],
        define:false,
        sellDateUnitOption:[],
        teamCumstoerOption:[],
        validOptions: {},
        tckSaltpOptions: [],
        merchants: { name: '', uuid: '' },
        rules: {
        },
        info: '',
        infoShow: false,
        tictData: [],
        editBoxShow: false,
        editShow: false,
        showApprove:false,
        showRefused:false,
        detailShowImgs:[],
        tictKindOption:[],
        validationOptions:[],
        yardOptions:[],

        tictObj: {}
      }
    },
    // 深度监听父组件的props传值
    watch: {
      salesPlanUuid(val) {
        this.uuid = val
        this.querySalesPlan()
      }
    },
    mounted() {
      this.uuid=this.$route.params.uuid
      console.log("uuid="+this.uuid)
      this.queryYard()
      this.queryKinds()
      this.queryvalidationOptions()
      this.queryTict()
      this.queryTckSaltp()
      this.queryTeamCus()
      this.querySell()
      this.queryUnit()
      this.querySalesPlan()
    },
    methods: {
      // 票务种类
      queryKinds() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TCK_KINDS',
            params: {}
          })
          .then(response => {
            this.tictKindOption = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 票务验证方式
      queryvalidationOptions() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TCK_VOLIDATION',
            params: {}
          })
          .then(response => {
            this.validationOptions = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 查询场地
      queryYard() {
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/yard/search/findAllTree',
            params: {}
          })
          .then(response => {
            this.yardOptions = response.data[0].subs
          })
          .catch(error => {
            console.log(error)
          })
      },
      //根据代码获取单位
      queryUnit(){
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/SALE_UNIT',
            params: {}
          })
          .then(response => {
            this.sellDateUnitOption = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      //根据代码获取售卖场次
      querySell(){
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/SALE_SELL',
            params: {}
          })
          .then(response => {
            this.sellEndOption = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 根据代码获取团队折扣
      queryTeamCus() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TEAM_CUS',
            params: {}
          })
          .then(response => {
            this.teamCumstoerOption = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },

      openDiscount() {
        this.define = true
      },
      addStallItems() {
        var params = {}
        params.name = ''
        params.takeColor = ''
        params.stallPrice=''
        this.editSalesPlan.stallItems.push(params)
      },
      delStallItems(index) {
        this.editSalesPlan.stallItems.splice(index, 1)
      },
      addItem() {
        var params = {}
        params.name = ''
        params.showTime = ''
        this.editSalesPlan.items.push(params)
      },
      del(index) {
        debugger
        this.editSalesPlan.items.splice(index, 1)
      },
      imgState(msg) {
        this.editBoxShow = msg
        this.editShow = msg
        // this.queryTict();
      },
      // 查询商户下所有票务信息
      queryTict() {
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/merch/search/findByUser',
            params: {}
          })
          .then(response => {
            // this.merchants = response.data[0]
            this.axios.request({
              method: 'get',
              url: './tck/kdi/tict/search/findByMerch',
              params: { merchUuid: this.merchants.uuid }
            }).then(response => {
              this.tictData = response.data.data
            }).catch(error => {
              console.log(error)
            })
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 根据代码获取售票类型
      queryTckSaltp() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TCK_SALTP',
            params: {}
          })
          .then(response => {
            this.tckSaltpOptions = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      getTictValue() {
        this.tictData.forEach(list => {
          if (list.name === this.editSalesPlan.tictName) {
            this.editSalesPlan.tictCode = list.code
            this.editSalesPlan.merchUuid = list.merchUuid
            this.editSalesPlan.merchName = list.merchName
            this.editSalesPlan.yardName = list.yardName
            this.editSalesPlan.yardCode = list.yardCode
          }
        })
      },
      // 通过uuid查询当前对象信息
      querySalesPlan() {
        this.axios.request({
          method: 'get',
          url: './tck/plan/ticketing-plan/' + this.uuid,
          headers: {},
          params: {}
        }).then(response => {
          this.insertSalesPlan(response.data.data)
        }).catch(error => {
          console.log(error)
        })
      },
      insertSalesPlan(salesPlan) {
        this.editSalesPlan.code = salesPlan.code
        this.editSalesPlan.tictCode = salesPlan.tictCode
        this.editSalesPlan.info = salesPlan.info
        this.editSalesPlan.salTp = salesPlan.salTp
        this.editSalesPlan.salName = salesPlan.salName
        this.editSalesPlan.merchUuid = salesPlan.merchUuid
        this.editSalesPlan.merchName = salesPlan.merchName
        this.editSalesPlan.yardName = salesPlan.yardName
        this.editSalesPlan.yardCode = salesPlan.yardCode
        this.editSalesPlan.reseDays = salesPlan.reseDays
        this.editSalesPlan.startTime = salesPlan.startTime
        this.editSalesPlan.endTime = salesPlan.endTime
        this.editSalesPlan.dayNum = salesPlan.dayNum
        this.editSalesPlan.boradsTimes = salesPlan.boradsTimes
        this.editSalesPlan.definePeoples = salesPlan.definePeoples
        this.editSalesPlan.price = salesPlan.price
        this.editSalesPlan.imgStr = salesPlan.imgStr
        this.editSalesPlan.teamCumstoer=salesPlan.teamCumstoer
        this.editSalesPlan.teamDefine=salesPlan.teamDefine
        this.editSalesPlan.broadcastList=JSON.parse(salesPlan.broadcastList)
        this.editSalesPlan.stallItems=JSON.parse(salesPlan.stallItems)
        this.editSalesPlan.sellStart=salesPlan.sellStart
        this.editSalesPlan.sellEnd=salesPlan.sellEnd
        this.editSalesPlan.sellTime=salesPlan.sellTime
        this.editSalesPlan.sellDateUnit=salesPlan.sellDateUnit
        //票务基本信息
        this.editSalesPlan.tictName = salesPlan.tictName
        this.yardName=this.replaceOneDictionarCode(this.yardOptions,salesPlan.yardName)
        this.tictKind=this.replaceOneDictionarCode(this.tictKindOption,salesPlan.tictKind)
        this.tictCode=salesPlan.tictCode
        this.tictInfo=salesPlan.tictInfo
        this.validation=this.replaceListDictionarCode(this.validationOptions,JSON.parse(salesPlan.validation))
        if(recedeTick!=null&&recedeTick!=''){
          if(recedeTick=='0'){
            this.recedeTick="不可退票"
          }else if(recedeTick=='100'){
            this.recedeTick="可退票"
          }
        }
        this.recedeTick=salesPlan.recedeTick
        this.detailImgStr=salesPlan.detailImgStr
        this.showButton(salesPlan.adr)
        if(salesPlan.startShowTime!=null&&salesPlan.startShowTime!=''&&
          salesPlan.endShowTime!=null&&salesPlan.endShowTime!=''){
          this.editSalesPlan.startShowTime=this.parseTime(salesPlan.startShowTime)
          this.editSalesPlan.endShowTime=this.parseTime(salesPlan.endShowTime)
          this.allShowTime.push(salesPlan.startShowTime)
          this.allShowTime.push(salesPlan.endShowTime)
          if(this.detailImgStr != null && this.detailImgStr != '') {
            this.detailShowImgs=[]
            JSON.parse(this.detailImgStr).forEach(res => {
              this.detailShowImgs.push({'name': res.filename, 'url': "http://39.106.30.94/respu/" + res.url})
            })
          }
        }
        if(salesPlan.teamCumstoer!=null&&salesPlan.teamCumstoer!=''){
          this.openDiscount()
                }
      },
      showButton(val){
        if(val=='Review'){
        this.showApprove=true
        this.showRefused=true
        }else if(val=='Pass'){
          this.showApprove=false
          this.showRefused=false
        }else if(val='Deny'){
          this.showApprove=false
          this.showRefused=false
        }
      },
      refused() {
        this.$confirm('确认拒绝 '+ ' ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.request({
            method: 'put',
            url: './tck/plan/ticketing-plan/review' + this.uuid,
            data: { adr: 'Deny' }
          }).then((response) => {
            console.log(response)
            this.$message({
              message: '已拒绝!',
              type: 'success'
            })
            this.editOut()
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      approve() {
        this.$confirm('确认通过审核 '+ ' ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.request({
            method: 'put',
            url: './tck/plan/ticketing-plan/review' + this.uuid,
            data: { adr: 'Pass' }
          }).then((response) => {
            console.log(response)
            this.$message({
              message: '已通过审核!',
              type: 'success'
            })
            this.editOut()
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          })
        })
      },
      endProcessing() {
        this.info = this.info + '修改成功,两秒后关闭'
        this.infoShow = true
        setTimeout(() => {
          this.infoShow = false
          this.$emit('editState', false)
          this.cleanSalesPlan()
          this.info = ''
        }, 2000)
      },
      cleanSalesPlan() {
        this.editSalesPlan = {
          code: '',
          tictName: '',
          tictCode: '',
          info: '',
          salTp: '',
          salName: '',
          merchUuid: '',
          merchName: '',
          yardName: '',
          yardCode: '',
          reseDays: '',
          startTime: '',
          endTime: '',
          dayNum: '',
          price: '',
          imgStr: '',
          boradsTimes: '',
          teamCumstoer: '',
          definePeoples: ''
        }
      },
      editOut() {
        this.$router.push("/tictAudit")
      }
    }
  }
</script>

<style scoped>

</style>
